<template>
  <div>
    <div class="main">
      <!-- <div class="weui-cells">
          <div class="weui-cell">
            <div class="weui-cell__bd">
                <input class="weui-input name-input" v-model="name" placeholder="请输入姓名"/>
            </div>
          </div>
      </div>
      <div class="submit-btn">
        <van-button @click="submit" size="large" type="primary">点击查询</van-button>
      </div> -->
      <van-row>
        <van-search :value="name" placeholder="请输入要查询的姓名" @search="submit" shape="round" />
      </van-row>
      <div v-if="result">
        <p class="tips-1">{{ result.province }}常住人口中 {{ result.name }} 共有 <span class="color-man">{{ result.total }}</span>人同名 </p>
        <div class="weui-flex result-main">
          <div class="weui-flex__item result-tongming">
            <span class="count color-man"> {{ result.man }} </span>
            <img src="/static/images/man.png" class="sex-img" />
          </div>
          <div class="weui-flex__item result-tongming">
            <span class="count color-woman"> {{ result.woman }} </span>
            <img src="/static/images/woman.png" class="sex-img" />
          </div>
        </div>
        <p class="tips-2">数据来自江苏省公安厅</p>
      </div>
    </div>
  </div>
  
</template>

<script>
export default {
  data () {
    return {
      name: '',
      result: null
    }
  },
  methods: {
    submit (e) {
      this.name = e.mp.detail
      let province = this.$root.$mp.query.province
      let param = {
        province: province,
        name: this.name
      }
      this.$fly.get('/open/doublename/query', param).then(res => {
        this.result = res.data
      })
    }
  },
  mounted () {
    this.name = ''
    this.result = null
  },
  created () {
    // let app = getApp()
  }
}
</script>

<style scoped>
  .banner-img {
    width: 750rpx;
  }
  .main {
    padding: 0.1rem 0.3rem;
  }
  .result .result-main {
    width: 100%;
    text-align: center;
    padding: 40px 0;
  }
  .result {
    margin-top: 20px;
  }
  .tips-1 {
    padding: 10px 15px;
    color: #65646a;
    font-weight: lighter;
    margin-bottom: 20px;
  }
  .tips-2 {
    padding: 10px 15px;
    color: #65646a;
    font-weight: lighter;
    font-size: 14px;
  }
  .result-tongming {
    width: 20%;
    margin: 0 15%;
    position: relative;
  }
  .sex-img {
    width: 80px;
    height: 125px;
  }
  .count {
    position: absolute;
    top: -23px;
    left: -1.5em;
    font-size: 20px;
    font-weight: bold;
  }
  .color-man {
    color: #4e70d1;
  }
  .color-woman {
    color: #ff426b;
  }
  .weui-cell {
    background-color: #dcdcdc;
  }
  .submit-btn {
    margin-top: 20rpx;
  }
</style>
